<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-select</title>
	</head>
	<body>
		<div class="demo-main other-page">
			<div class="admim-title">
				<h2>Select 选择器</h2>
				<p>当选项过多时，使用下拉菜单展示并选择内容。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
					<p>适用广泛的基础单选</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择" name="sex" size="small">
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
					</qx-select>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>带默认值</h3>
					<p>Select 下拉框默认选中状态。</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择" name="food">
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" checked value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
					</qx-select>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>禁用状态</h3>
					<p>Select 下拉框不可用状态。</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择" disabled name="disabled">
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
					</qx-select>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>图标选择器</h3>
					<p>Select 下拉选择对应图标</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择图标" name="icon" icon="spinner" icon-group></qx-select>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>可搜索</h3>
					<p>可以利用搜索功能快速查找选项</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择" filterable name="filterable">
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
					</qx-select>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础多选</h3>
					<p>适用性较广的基础多选，用 Tag 展示已选项</p>
				</div>
				<div class="content">
					<qx-select placeholder="请选择" multiple name="multiple">
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
						<qx-option label="黄金糕" value="0"></qx-option>
						<qx-option label="双皮奶" value="1"></qx-option>
						<qx-option label="蚵仔煎" value="2"></qx-option>
						<qx-option label="龙须面" value="3"></qx-option>
						<qx-option label="北京烤鸭" value="4"></qx-option>
					</qx-select>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Select Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>label</td>
						<td>数据文本</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>value</td>
						<td>数据value</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>checked</td>
						<td>当前是否勾选</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>filterable</td>
						<td>是否可搜索</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>multiple</td>
						<td>是否多选</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>是否禁用</td>
						<td>boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>icon-group</td>
						<td>是否是图标选择器</td>
						<td>—</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>icon</td>
						<td>默认图标（传入后缀名，不需要icon-）仅图标选择器有效</td>
						<td>—</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸</td>
						<td>string</td>
						<td>medium / small / mini</td>
						<td>—</td>
					</tr>
					<tr>
						<td>name</td>
						<td>select input 的 name 属性</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>Select Events</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>change</td>
						<td>绑定值变化时触发的事件</td>
						<td>选中的 Checkbox value 值</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			$(function () {
				$('.demo-main').select({
					change: function (val) {
						console.log(val)
					}
				})
			})
		</script>
	</body>
</html>
